<template>
  <div>
    <div class="info-content">
      <div class="info-content-item">
          <span class="label">单据号:</span>
          <span class="value">{{props.content?.no}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销内容:</span>
          <span class="value">{{props.content?.title}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销项目:</span>
          <span class="value">{{props.content?.no}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销日期:</span>
          <span class="value">{{props.content?.project_name}}</span>
      </div>
      <div class="info-content-item">
          <span class="label">报销类目:</span>
          <div class="value">
            <div v-for="item, index in feeitems" :key="index">
              {{ item.feeitem_name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.amount }}
            </div>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">类目预算:</span>
          <div class="value feeitem_detail">
            <el-text type="primary">预算：{{ feeitem_detail.budget }}</el-text>&nbsp;/&nbsp;
            <el-text type="success">核算：{{ feeitem_detail.calculate }}</el-text>&nbsp;/&nbsp;
            <el-text type="warning">已支付：{{ feeitem_detail.paid }}</el-text>&nbsp;/&nbsp;
            <el-text type="danger">未支付：{{ feeitem_detail.no_paid }}</el-text>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">报销金额:</span>
          <span class="value">{{props.content?.amount}}</span>
      </div>
      <div class="info-content-item" style="display: block;">
          <span class="label">明细:</span>
          <div class="table-warp">
            <el-table
              :data="details_lists">
              <el-table-column :key="index" :prop="`f${index}`" :label="item" v-for="item, index in details_headers" />
          </el-table>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">图片:</span>
          <div class="value">
            <div class="images-item" :key="index" v-for="item, index in props.content?.image">
              <el-image style="width: 100px; height: 100px" :src="`${siteConfig.cdnUrl}${item}`" fit="cover" :preview-src-list="[`${siteConfig.cdnUrl}${item}`]"/>
            </div>
          </div>
      </div>
      <div class="info-content-item">
          <span class="label">附件:</span>
          <div class="value">
            <div class="files-item" :key="index" v-for="item, index in props.content?.files">
              <a :href="`${siteConfig.cdnUrl}${item}`" target="_blank">{{ item.split('/')[item.split('/').length - 1] }}</a>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted, watch } from 'vue'
import { useSiteConfig } from '/@/stores/siteConfig'
import { feeitemsDetail } from '/@/api/backend/index'
const props = defineProps({
    content: Object
})
const siteConfig = useSiteConfig()
const details_headers = ['费用编号', '费用二级', '日期', '事由', '起点', '终点', '金额', '发票', '发票号', '是否抵扣', '抵扣后金额', '附件', '付款状态']
const details_lists = ref([])
const feeitem_detail = ref({})
const feeitems = ref([])
const feeitemIds = []

watch(() => props.content, function() {
    setDetailList()
    getFeeitemDetail()
})
onMounted(() => { 
    setDetailList()
    getFeeitemDetail()
})

const setDetailList = () => {
    try {
        details_lists.value = JSON.parse(props.content?.detail)
    } catch (error) {
        details_lists.value = []
    } 
    try {
      feeitems.value = JSON.parse(props.content?.feeitems)
    } catch {
      feeitems.value = []
    }
}

const getFeeitemDetail = () => {
  feeitems.value.forEach((item: any) => {
      feeitemIds.push(item.feeitem_id)
    })
  feeitemsDetail({project_id: props.content.project_id, feeitem_id: feeitemIds}).then((res) => {
      console.log('res', res)
      res.data.calculate = res.data && res.data.calculate ? Number(res.data.calculate) : 0
      res.data.paid = res.data.paid ? Number(res.data.paid) : 0
      res.data.no_paid = (res.data.calculate - res.data.paid).toFixed(2)
      feeitem_detail.value = res.data
  })
}
</script>

<style scoped lang="scss">
.info-content-item {
    display: flex; justify-content: space-between; padding: 5px 10px; align-items: center;
    .label { display: inline-block; white-space: nowrap; padding-right: 13px;}
    .value {
        .ml-2 { 
            margin-bottom: 10px;
            margin-right: 10px
        }
    }
    div.value {
        
    }
}

::deep th,td { font-size: 12px; }
:deep(.el-table .cell) { font-size: 12px; padding:5px; min-width: unset; }
:deep(.el-table td.el-table__cell){ font-size: 12px; padding:0; }

.feeitem_detail {
  display: flex;flex-direction: row;
  white-space: nowrap;
    align-items: end;
  span { flex: 1; }
}
</style>